<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>新增培训试题</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        ol, ul, li {
            list-style: none;
        }

        .question {
            margin-bottom: 10px;
            border-radius: 4px;
            background-color: #ffffff;
            border: 1px solid #f5f5f3;
            /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);*/
            position: relative;
            overflow: visible;
            color: #484848;
            text-align: left;
        }

        .question .q_content .q_option_list {
            margin: 6px 0 0 16px;
        }

        .question .q_content .q_title_wrap {
            position: relative;
            padding-left: 22px;
            min-width: 80%;
        }

        .question .q_content .q_title_wrap .q_seq {
            position: absolute;
            left: 7px;
            top: 6px;
            font-size: 15px;
            color: #484848;
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .q_option_ul {
            /*padding-right: 184px;*/
        }

        .question .q_content .q_option_ul > li {
            margin: 10px 0 0;
            padding: 2px 0 0 40px;
            position: relative;
            box-sizing: border-box;
            min-height: 24px;
        }

        .q_option_list {
            margin-top: 10px !important;
            width: 80%;
        }

        .lookTitle {
            padding-top: 5px;
            padding-left: 4px;
            height: 20px;
            line-height: 20px;
            /* font-size: 20px; */
            font-weight: bold;
        }

        .survey_main .content_editable {
            box-sizing: border-box;
            border-radius: 2px;
            border: solid 1px transparent;
            color: #484848;
        }

        .question .q_content .icon_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 8px;
        }

        .examT {
            width: 120px;
            height: 120px;
            background-image: url("/dist/img/examT.png");
            background-repeat: no-repeat;
            position: absolute;
            top: 50px;
            right: 160px;
        }

        .examF {
            width: 120px;
            height: 120px;
            background-image: url("/dist/img/examF.png");
            background-repeat: no-repeat;
            position: absolute;
            top: 50px;
            right: 160px;
        }

        .question .q_content .icon_active_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            /*background-color: #0076FF;*/
            background: url("/dist/img/duigou2.png") -2px center no-repeat;

            position: absolute;
            top: 6px;
            left: 8px;
        }

        .question .q_content .icon_check {
            width: 20px;
            height: 20px;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 6px;
            left: 7px;
        }

        .question .q_content .icon_active_check {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            background: url("/dist/img/duigouCheck.png") -1px center no-repeat;
            position: absolute;
            top: 6px;
            left: 8px;
        }

        .question .q_content .q_option_ul > li .option_title {
            /*padding: 5px 10px 5px 5px;*/
            font-size: 14px;
            line-height: 1.43;
            min-height: 20px;
            word-wrap: break-word;
        }

        .questionNum {
            font-size: 14px;
            padding-top: 3px;
            width: 20px;
            display: block;
            float: left;
        }

        .cz {
            width: 30%;
            position: absolute;
            /*right: 110px;*/
            right: -24px;
            top: 0;
        }

        .cz div {
            float: left;
            width: 70px;
            text-align: center;
            color: #2b669a;
        }

        .cz div:hover {
            box-shadow: 0px 0px 0px #fff;
        }

        .cz .romove {
            color: red;
        }

        .spanQuestionInput {
            font-size: 15px;
            padding-left: 12px;
            padding-top: 8px;
            margin-left: 10px;
            min-width: 80%;
            min-height: 24px;
        }

        .spanOptionInput {
            font-size: 15px;
            padding-left: 6px;
            padding-top: 2px;
            margin-left: 21px;
            min-height: 24px;
            min-width: 100%;
        }

        .content2 {
            padding: 0;
        }

        .questionType {
            position: absolute;
            top: 7px;
            left: -28px;
            font-size: 12px;
        }

        input::-webkit-input-placeholder {
            color: rgb(204, 204, 204);
        }

        .content {
            padding: 10px 10px;
        }

        .question .q_content .icon_active_check {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            background: url("/dist/img/duigouCheck.png") -1px center no-repeat;
            position: absolute;
            top: 6px;
            left: 7px;
        }


        .questionType {
            position: absolute;
            top: 9px;
            left: 7px;
            font-size: 12px;
        }

        .question .q_content .icon_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: solid 1px #aaaaaa;
            background-color: #ffffff;
            cursor: pointer;
            position: absolute;
            top: 4px;
            left: 24px;
        }

        .question .q_content .icon_active_radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            border: solid 1px #aaaaaa;
            /*background-color: #0076FF;*/
            background: url("/dist/img/duigou2.png") -2px center no-repeat;

            position: absolute;
            top: 4px;
            left: 24px;
        }

        .question .q_content .q_option_ul > li .option_title {
            /*padding: 5px 10px 5px 5px;*/
            font-size: 16px;
            line-height: 1.43;
            min-height: 20px;
            word-wrap: break-word;
        }

        .question .q_content .q_title_wrap .q_title {
            /*padding: 6px 10px;*/
            font-size: 15px;
            width: 100%;

        }

        .btn {
            padding: 33px 12px;
        }

        .tijiaoBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 50%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }

        .tijiaoBtn div {
            float: left;
            width: 50%;
        }

        .tijiaoBtn div.ok {
            border-right: 1px solid #ddd;
        }

        .tijiaoBtn div.nook {
            border-left: 1px solid #ddd;
        }
        .touBtn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: #2a8cec;
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            margin: 0 auto;
            z-index: 11111;
        }

        .touBtn div {
            float: left;
            width: 50%;
            box-sizing: border-box;
            font-size: 16px;
        }

        .touBtn .line {
            height: 24px;
            width: 1px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 13px;
        }
    </style>
</head>
<body>
<section class="content " id="app" style="width: 100%;    overflow: hidden;" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div style="padding-bottom: 42px;">
        <div class="module question question_focus" v-for="(item,i) in info.questionList">
            <div class="q_content_wrap">
                <div class="q_content">
                    <div class="q_title_wrap">
                        <div class="questionType">
                            <span v-if="item.type==0"></span>
                        </div>
                        <div class="q_seq">{{i+1}}、</div>
                        <div class="content_editable editable_focus lookTitle">
                            <input type="text" class="aa q_title"
                                   style="width: 80%;border: none;border-bottom: 1px solid #cbcbcd;"
                                   placeholder="请编辑题目"
                                   v-if="pageType=='edit'"
                                   v-model="item.content">
                            <div v-else class="spanQuestionInput">{{item.content}}</div>
                        </div>
                        <div class="cz">
                            <!-- <div class="btn add" @click="addRow(i,0)" v-if="pageType=='edit'" style="color: #2a8cec;">新增单选
                             </div>-->
                            <div class="btn add" @click="addRow(i,1)" v-if="pageType=='edit'"
                                 style="color: #2a8cec;float: left;">新增
                            </div>
                            <div class="btn romove" @click="delRow(i)" v-if="pageType=='edit'" style="float: left;">删除
                            </div>
                        </div>
                    </div>

                    <div class="q_option_list" v-if="item.type==0">
                        <i :class="item.tf&&item.tf==1?'examT':''"></i>
                        <i :class="item.tf==0?'examF':''"></i>
                        <ul class="q_option_ul ui-sortable" style="padding-left: 10px;  padding-right: 10px;">
                            <li class="option_item" v-for="(item2,j) in item.optionList">
                                <div class="option_title_wrap">
                                    <div class="content_editable ui-sortable-handle">
                                        <i :class="item2.type == 1?'icon_wj icon_active_radio':'icon_wj icon_radio'"
                                           v-if="pageType=='edit'"
                                           @click="checkOne(i,j)"></i>
                                        <i :class="item2.type == 1?'icon_wj icon_active_radio':'icon_wj icon_radio'"
                                           v-else></i>
                                        <span class="questionNum">{{changeNum(j)}}、</span>
                                        <input type="text" class="aa option_title" v-if="pageType=='edit'"
                                               style="width: 60%;margin-left: 5px;border: none;border-bottom: 1px solid #cbcbcd;"
                                               v-model="item2.content">
                                        <div v-else
                                             class="spanOptionInput">{{item2.content}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="q_option_list" v-else>
                        <i :class="item.tf&&item.tf==1?'examT':''"></i>
                        <i :class="item.tf==0?'examF':''"></i>
                        <ul class="q_option_ul ui-sortable" style="padding-left: 10px;  padding-right: 10px;">
                            <li class="option_item" v-for="(item2,j) in item.optionList">
                                <div class="option_title_wrap">
                                    <div class="content_editable ui-sortable-handle">
                                        <i :class="item2.type == 1?'icon_wj icon_active_check':'icon_wj icon_check'"
                                           v-if="pageType=='edit'"
                                           @click="checkBox(i,j)"></i>
                                        <i :class="item2.type == 1?'icon_wj icon_active_check':'icon_wj icon_check'"
                                           v-else></i>
                                        <span class="questionNum">{{changeNum(j)}}、</span>
                                        <input type="text" class="aa option_title" v-if="pageType=='edit'"
                                               style="width: 60%;margin-left: 5px;border: none;border-bottom: 1px solid #cbcbcd;"
                                               v-model="item2.content">
                                        <div v-else
                                             class="spanOptionInput">{{item2.content}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--<div   class="south no-print"      style="height:50px;line-height:50px;text-align:center;bottom:0;position: fixed;width: 100%;">
        <div value="" class=""   @click="see()" v-if="pageType=='edit'"
             style="background-color: #228bee;margin-left:-10px;width: 50%;float:left;color:#fff;font-size: 14px;position: relative">
            <span style="position: absolute;width:1px;height:14px;font-size:20px;right:-1px;top:-3px;">|</span>
            预览
        </div>
        <div value="" class=""  @click="save()" v-if="pageType=='edit'"
             style="background-color: #228bee;width: 50%;float:left;color:#fff;font-size: 14px">保存
        </div>

    </div>-->


    <div class="touBtn"   >
        <div  @click="see()" v-if="pageType=='edit'">预览</div>
        <div  @click="save()" v-if="pageType=='edit'">保存</div>
        <i class="line"></i>
    </div>



</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        page: {
            urlParams: null,
            queryParams: {
                requestPage: 1,
                pageSize: 30
            },
            dataUrl: '',
            createQueryParams: function () {
            },
            getByPage: function (type) {
                $.ajax({
                    url: $.wyui.page.dataUrl,
                    data: JSON.stringify($.wyui.page.queryParams),
                    beforeSend: function () {

                    },
                    complete: function () {
                    },
                    success: function (r) {
                        $.wyui.page.queryParams.requestPage++;

                        if (r.data.sendData.pager && r.data.sendData.pager.pageCount == 0) {
                            r.data.sendData.pager.pageCount = 1;
                        }
                        if (type == "scroll") {
                            $.wyui.page.getByPage_scroll_callback(r.data.sendData.records);
                        } else {
                            if ($.wyui.page.getByPage_callback_new) {
                                $.wyui.page.getByPage_callback_new(r.data.sendData.records);
                            }
                        }

                    }
                });
            }
        },
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                        JSBridge.call(UI, 'showToast', {title: r.e.desc})
                    }
                },
                error: function (e) {
                    JSBridge.call(UI, 'showToast', {title: e.responseText})
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            pageType: getUrlParamObj().pageType ? getUrlParamObj().pageType : 'look',//页面类型
            goback: getUrlParamObj().goback,
            info: {
                id: getUrlParamObj().mainId ? getUrlParamObj().mainId : '',
                questionList: [
                    {
                        "content": "",
                        "fraction": 5,
                        "type": 0,
                        "optionList": [
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"}
                        ]
                    }, {
                        "content": "",
                        "fraction": 5,
                        "type": 0,
                        "optionList": [
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"},
                            {"content": "", "type": "0"}
                        ]
                    }

                ]
            }
        },
        methods: {
            changeNum: function (num) {
                var letter = 1;
                switch (num) {
                    case 0:
                        letter = 'A';
                        break;
                    case 1:
                        letter = 'B';
                        break;
                    case 2:
                        letter = 'C';
                        break;
                    case 3:
                        letter = 'D';
                        break;
                    default :
                        break;
                }
                return letter
            },
            addRow: function (i, j) {
                var that = this;
                var question = {
                    "content": "",
                    "fraction": 5,
                    "type": j,
                    "optionList": [
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"},
                        {"content": "", "type": "0"}
                    ]
                }
                this.info.questionList.splice(i + 1, 0, question);
            },
            delRow: function (i) {
                var that = this;
                if (that.info.questionList && that.info.questionList.length > 1) {
                    var param = {
                        //title: "提示的标题",
                        content: "确认要删除吗？",
                        cancelText: "取消",
                        confirmText: "确认",
                        showCancel: true,
                        cancelable: false
                    }
                    that.dialogResult = "等待选择..."
                    JSBridge.call(UI, 'showDialog', param, function (res) {
                        var dialogResult = res.sendData.data;
                        if (dialogResult == '确认') {
                            that.info.questionList.splice(i, 1);
                        }
                    })
                } else {
                    that.showToast("请保留最少一道题目");
                }
            },
            checkOne: function (i, j) {
                console.log(i, j)
                for (var z = 0; z < this.info.questionList[i].optionList.length; z++) {
                    if (z != j) {
                        console.log(z)
                        this.info.questionList[i].optionList[z].type = "0"
                    } else {
                        if (this.info.questionList[i].optionList[z].type == "1") {
                            this.info.questionList[i].optionList[z].type = "0"
                        } else {
                            this.info.questionList[i].optionList[z].type = "1"
                        }
                    }
                }
                console.log(this.info.questionList)
            },
            checkBox: function (i, j) {
                if (this.info.questionList[i].optionList[j].type == "1") {
                    this.info.questionList[i].optionList[j].type = "0"
                } else {
                    this.info.questionList[i].optionList[j].type = "1"
                }
            },
            caseABCD: function (sortNo) {
                var rr = '';
                switch (sortNo) {
                    case 0:
                    case "0":
                        rr = 'A';
                        break;
                    case 1:
                    case "1":
                        rr = 'B';
                        break;
                    case 2:
                    case "2":
                        rr = 'C';
                        break;
                    case 3:
                    case "3":
                        rr = 'D';
                        break;
                    default :
                        rr = '';
                        break;
                }
                return rr;

            },
            showToast: function (title) {
                var param = {
                    title: title
                }
                JSBridge.call(UI, 'showToast', param)
            },
            save: function () {
                var that = this;
                for (var i = 0; i < that.info.questionList.length; i++) {
                    var flag = true;
                    if (that.info.questionList[i].content == '') {
                        that.showToast("请填写第" + (i + 1) + "道题题目名称");
                        return false;
                    }
                    for (var j = 0; j < that.info.questionList[i].optionList.length; j++) {
                        if (that.info.questionList[i].optionList[j].content == '') {
                            that.showToast("请填写第" + (i + 1) + "道题" + that.caseABCD(j) + "选项内容");
                            return false
                        }
                        if (that.info.questionList[i].optionList[j].type == '1') {
                            flag = false;
                        }
                    }
                    if (flag) {
                        that.showToast("请勾选第 " + (i + 1) + " 道题答案");
                        return
                    }
                }
                JSBridge.call(UI, 'showLoading', {})
                $.wyui.postMethod("/exam/saveExam.json", trimRN(that.info), function (data) {
                    JSBridge.call(UI, 'hideLoading')
                    that.showToast("保存成功");
                     var param = {
                        backRefresh: true,       //是否返回刷新
                    }
                    JSBridge.call(ROUTER, 'navigateBack', param)
                })
            },
            see: function () {
                var that = this;
                $.wyui.postMethod("/exam/saveExam.json", trimRN(that.info), function (data) {
                    var param = {
                        title: '预览详情',         //顶部标题
                        url: '/page/exam/previewApp.html?mainId=' + that.info.id + '&pageType=' + 'look' + '&goback=' + 0,
                    }
                    JSBridge.call(ROUTER, 'navigateTo', param)

                })
            },
        },
        mounted: function () {
            var that = this;
            var pageType = getUrlParamObj().pageType ? getUrlParamObj().pageType : 'look';//页面类型
            id = getUrlParamObj().mainId;
            JSBridge.call(UI, 'showLoading', {})

            $.wyui.postMethod("/exam/getExamDetailByMainId.json", {id: id}, function (data) {
                console.log(data)
                that.info = data.main;
                if (that.info.questionList && that.info.questionList.length == 0) {
                    that.addRow(-1, 1);
                    that.addRow(0, 1);
                }
                JSBridge.call(UI, 'hideLoading')
            })


        }
    })
</script>
</body>
</html>